Prevent background image flashing on change
Load both images using multiple background and make the first one on the top then adjust background-size
to show the other on hover. In this case, both images will be loaded initially and the second one will be ready on hover:
.backgroundbutton { background-image: url('http://www.BungalowSoftware.com/images/silver-background.jpg'), url('http://www.BungalowSoftware.com/images/silver-background2.jpg'); background-size:auto; width: 100px; height: 30px; background-color: orange;}
.backgroundbutton:hover { background-size:0 0,auto;}
<a class="backgroundbutton"> hover over me</a>
How to prevent a background image flickering on change
Try to preload the image resource to the device storage by including the image in DOM like in the following HTML-Code. Maybe the error comes up because the image resource need to be loaded which takes some time (flickering).
<img src="imageToPreload.png" style="display:none;" alt="Sample Image" />
You may prefer to use sprites-images. By using sprites your application will need less HTTP-Requests to load all ressources into your page. Also add the following CSS styles if you are using css animations
. It will prevent background flickering on mobile devices:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
Smoother background-images animations (prevent flickering)
I found this to be extremely helpful, as pointed out by @vxpin in the comments.
https://stackoverflow.com/a/52358326/4262057
Basically you preload all the images as follows:
.stylename {
background-image:
url('http://www.BungalowSoftware.com/images/silver-background.jpg'),
url('http://www.BungalowSoftware.com/images/silver-background2.jpg');
}
Background Image flickering when change - react
You can do it with just html, with only small tweaks to your React code.
To download the image earlier you can follow this answer. The only problem is, that you don't know the url of the image, because it's randomized once you build the website.
To mitigate this, move your images out of the src
folder to the public
folder. I assume you would use /public/images/
to store them. Here is the modified code:
index.html
<head>
..
..
<link rel="preload" href="%PUBLIC_URL%/images/Banjo.jpg" as="image">
<link rel="preload" href="%PUBLIC_URL%/images/Hands.jpg" as="image">
<link rel="preload" href="%PUBLIC_URL%/images/Mic.jpg" as="image">
<link rel="preload" href="%PUBLIC_URL%/images/Sax.jpg" as="image">
...
</head>
App.js
import React, { useState, useEffect } from "react";
import NavBarA from "./components/NavBarA";
import { Router, Route, Switch } from "react-router-dom";
import BookABand2 from "./components/Profile/BookABand2";
import LiveProfile from './components/BookABand/LiveProfile'
import Account from './components/Account/Account'
import history from "./uitls/history";
import PrivateRoute from "./components/PrivateRoute";
import 'bootstrap/dist/css/bootstrap.min.css';
import AqgSetup3 from "./components/AqgSetup3";
import './App.css';
import { useAuth0 } from './react-auth0-spa'
import { Button } from 'reactstrap'
function App() {
const [bgImgArray] = useState(['Banjo.jpg', 'Hands.jpg', 'Mic.jpg', 'Sax.jpg'])
...
return (
<div className="App h-100" style={{
paddingTop: user ? '85px' : '0px'
}}>
<Router history={history}>
...
<Switch>
<Route path="/" exact >
<div className='homePage h-100' style={{
display: !isAuthenticated ? 'block' : 'none',
backgroundImage: `url(/public/images/${bgImg})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
webkitTransition: 'background-image 1s ease-in-out',
transition: 'background-image 1s ease-in-out',
}}>
...
</div>
</Route>
...
</Switch>
</Router>
</div>
);
}
export default App;
Changing background-image property causes a flicker in Firefox
Unfortunately, it seems like this flicker is a known bug in Firefox caused by its image decoder, which won't decode an image until it's displayed for the first time. In the snippet below, I created overlapping divs, one which loads the next image slightly earlier and sits behind the other. This way when the other "flickers," the proper image is already displayed behind, rather than a white background.
You could also theoretically display all the images in the hidden div really quickly, then set it back to white, since the images only need to be displayed once for the decoder to work.
Depending on the long-term goal for this project, the most proper way around this problem may be to use a <canvas>
to render your images. The canvas element uses a different decoder which won't cause a flicker.
class Cats extends React.Component { constructor(props) { super(props); this.props.items.forEach((item) => { const img = new Image(640, 640); img.src = item; });
this.state = { background: props.items[0], preloadBackground: props.items[1], index: 0 };
this.rotate = this.rotate.bind(this); }
// Let's you see when the component has updated. componentDidMount() { this.interval = setInterval(() => this.rotate(), 5000); }
componentDidUnmount() { clearInterval(this.interval); }
rotate() { const maximum = this.props.items.length - 1; const index = this.state.index === maximum ? 0 : this.state.index + 1;
this.setState({ preloadBackground: this.props.items[index], index }); setTimeout(() => { this.setState({ background: this.props.items[index], }); }, 100); }
render() { return ( <div className="pane"> <div className="preload-background" style={{ backgroundImage: `url(${this.state.preloadBackground})` }} > </div> <div className="background" style={{ backgroundImage: `url(${this.state.background})` }} > </div> </div> ); }}
ReactDOM.render( <Cats items={[ "https://preview.redd.it/8lt2w3du0zb31.jpg?width=640&crop=smart&auto=webp&s=58d0eb6771296b3016d85ee1828d1c26833fd022", "https://preview.redd.it/120qmpjmg1c31.jpg?width=640&crop=smart&auto=webp&s=1b01fc0c3f20098e6bb1f4126c3c2a54b7bc2b8e", "https://preview.redd.it/guprqpenoxb31.jpg?width=640&crop=smart&auto=webp&s=ace24e96764bb40a01e7d167a88d35298db76a1c", "https://preview.redd.it/mlzq0x1o0xb31.jpg?width=640&crop=smart&auto=webp&s=b3fd159069f45b6c354de975daffde21f04c3ad5" ]} />, document.querySelector(".wrapper"));
html, body, .wrapper, .pane { width: 100%; height: 100%;}
.background { position: static; background-size: cover; height: 100%; width: 100%; transition: background-image 1s ease-in-out;}
.preload-background { position: absolute; background-size: cover; height: 100%; width: 100%; z-index: -1; transition: background-image 1s ease-in-out;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.1/react-dom.min.js"></script>
<div class="wrapper"></div>
How to get rid of the white flash when changing background image with animation?
You have to preload your images:
@keyframes backswitch { 0% {background-image: url("https://dummyimage.com/300/ccc/fff.png");} 20% {background-image: url("https://dummyimage.com/300/3f5/fff.png");} 40% {background-image: url("https://dummyimage.com/300/71c/fff.png");} 60% {background-image: url("https://dummyimage.com/300/228/fff.png");} 80% {background-image: url("https://dummyimage.com/300/c11/fff.png");} 100% {background-image: url("https://dummyimage.com/300/544/fff.png");}}body { /*Adjusting images and animation*/ background-repeat: no-repeat; max-width: 100%; max-height: 100%; background-size: cover; animation-name: backswitch; animation-duration: 60s; animation-iteration-count: infinite;}
div.preload-images { background: url("https://dummyimage.com/300/ccc/fff.png") no-repeat -9999px -9999px; background: url("https://dummyimage.com/300/ccc/fff.png") no-repeat -9999px -9999px, url("https://dummyimage.com/300/3f5/fff.png") no-repeat -9999px -9999px, url("https://dummyimage.com/300/71c/fff.png") no-repeat -9999px -9999px, url("https://dummyimage.com/300/228/fff.png") no-repeat -9999px -9999px, url("https://dummyimage.com/300/c11/fff.png") no-repeat -9999px -9999px, url("https://dummyimage.com/300/544/fff.png") no-repeat -9999px -9999px;}
<body> <div class="preload-images"></div></body>
First change of css background image, of a div, flickers
You need to preload the image in order to avoid the flicker. Using CSS one could do:
body::after {
content: url(preload-me-1.jpg) url(preload-me-2.jpg);
display: none;
}
But maybe you actually need image sprites to change background on mouse over, that way you need no preloading.
Why is the background flashing/flickering when transitioning to another image? css animation keyframes
As Temani Afif already said, your problem comes from the loading time from the server.
Preload your images using them for the previous keyframe, even though they aren't visible:
html,body{
animation-name: rainbowtext;
animation-duration: 35s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
@keyframes rainbowtext{
0%{
background-image: url("diet-soda.jpg"), url("coke.jpeg");
}
25%{
background-image: url("coke.jpeg"), url("diet-soda2.jpg");
}
50%{
background-image: url("diet-soda2.jpg"), url("soda2.jpg");
}
75%{
background-image: url("soda2.jpg"), url("sugar.jpeg");
}
100%{
background-image: url("sugar.jpeg");
}
}
How to resolve unwanted flickering of Controls when the Form has a background Image?
Nothing to do with CPU limitations. This is related to the rendering of the Background of a Form and the content of its child Controls.
Read a description here: How to fix the flickering in User Controls.
(but WS_EX_COMPOSITED
won't help you here).
Since you have some Controls that a combined functionality, you can build a UserControl to group the single Controls into a specialized entity that provide the functionality and contains all the logic required to perform this Task and notify when a choice has been made (all input values are validated and the submit Button is cliecked).
To handle the transparency of this UserControl, you have to tweak its standard behavior a little bit, since just setting BackColor = Color.Transparent
is not enough when you have a Form with a background Image: the Transparency would be simulated considering the Form's Background
Color, not the content of the background Image (an Image is not a Color).
You can make your UserControl actually transparent, preventing its background from being painted.
- Use SetStyle() to set ControlStyles.Opaque, so the background is not painted.
- Set
ControlStyles.OptimizedDoubleBuffer
toFalse
: this UserControl cannot useDoubleBuffering
of course, otherwise we're back at square one (the Parent Control's background is used to build the BufferedGraphcs object) - Override CreateParams to add
WS_EX_TRANSPARENT
to the extended styles of the UserControl Window, so the System won't interfere, letting other windows behind the UserControl draw their content first (but we won't draw ours after). - The
WS_CLIPCHILDREN
Style needs to be removed (since the base class,Control
, adds it) otherwise the UserControls's child Controls may disappear when the Form is resized.
When the Add Task
Button is clicked, the UserControl can raise a public event, passing in a custom EventArgs object - after validation - the values entered.
The Form can subscribe to this event and read the custom EventArgs Properties when the event is raised.
- Since your Form has a BackgroudImage, set
DoubleBuffered = True
.
This is how it looks like:
The Image shown here has a size of 3840x2560
(it's freely downloadable from the Web).
Try to resize the Form without double-buffering it :)
A PasteBin of the complete UserControl, in case it's needed:
Transparent UserControl
Assuming the UserControl (AddNewTask
) added to a Form is named AddNewTask1
, you can add an event handler to its AddTaskClicked
event, using the Designer or in code, in the Form Constructor:
Public Class SomeForm
Public Sub New()
InitializeComponent()
AddHandler AddNewTask1.AddTaskClicked, AddressOf OnTaskAdded
End Sub
Private Sub OnTaskAdded(sender As Object, e As AddNewTask.AddTaskEventArgs)
Dim values As String = $"{e.TaskName}: Hours: {e.TaskHours}, Minutes: {e.TaskMinutes}"
End Sub
End Sub
The AddNewTask
UserControl:
Public Class AddNewTask
Private Const WS_EX_TRANSPARENT As Integer = &H20
Private Const WS_CLIPCHILDREN As Integer = &H2000000
Public Event AddTaskClicked As EventHandler(Of AddTaskEventArgs)
Public Sub New()
SetStyle(ControlStyles.Opaque Or ControlStyles.ResizeRedraw, True)
SetStyle(ControlStyles.OptimizedDoubleBuffer, False)
InitializeComponent()
End Sub
Protected Overrides ReadOnly Property CreateParams As CreateParams
Get
Dim cp As CreateParams = MyBase.CreateParams
cp.Style = cp.Style And Not WS_CLIPCHILDREN
cp.ExStyle = cp.ExStyle Or WS_EX_TRANSPARENT
Return cp
End Get
End Property
Private Sub btnAddTask_Click(sender As Object, e As EventArgs) Handles btnAddTask.Click
Dim hours As UInteger
Dim sHours = If(String.IsNullOrEmpty(txtHours.Text.Trim()), "0", txtHours.Text)
If (Not UInteger.TryParse(sHours, hours)) Then
ShowInputErrorMessage("Invalid Hours", txtHours)
Return
End If
Dim minutes As UInteger
Dim sMinutes = If(String.IsNullOrEmpty(txtMinutes.Text.Trim()), "0", txtMinutes.Text)
If (Not UInteger.TryParse(sMinutes, minutes)) Then
ShowInputErrorMessage("Invalid Minutes", txtMinutes)
Return
End If
Hide()
Dim args = New AddTaskEventArgs(txtTaskName.Text, hours, minutes)
RaiseEvent AddTaskClicked(Me, args)
txtHours.Clear()
txtMinutes.Clear()
txtTaskName.Clear()
ActiveControl = txtTaskName
End Sub
Private Sub ShowInputErrorMessage(msg As String, ctrl As TextBox)
MessageBox.Show(msg)
ctrl.Select()
ctrl.SelectAll()
End Sub
Public Class AddTaskEventArgs
Inherits EventArgs
Public Sub New(sTaskName As String, hours As UInteger, minutes As UInteger)
TaskName = sTaskName
TaskHours = hours
TaskMinutes = minutes
End Sub
Public ReadOnly Property TaskName As String
Public ReadOnly Property TaskHours As UInteger
Public ReadOnly Property TaskMinutes As UInteger
End Class
End Class
Related Topics
How to Fix Safari Mix-Blend-Mode: Color-Dodge Bug
CSS: Styling When Element Has Two Classes
CSS: How to Center Box Div Element Directly in Center
Django 1.8 Static Files Doesnt Work
Yii Chtml::Radiobuttonlist - CSS to Align Horizontally
Detect Screen Width with CSS Media Queries
Bad Cursor in Select/Option, Ie
Ie9-11 Detecting Transform-Style: Preserve-3D
Is There an Equivalent to Jquery's: First Selector in CSS3
Prevent Background Image Flashing on Change
Safari Position:Sticky Not Working in an Overflow:Auto Element
Angular 2 - Jquery | Adding Styles (Top/Left) with a Mouse Position
Vertically Center a Div with Variable Height Within a Div That Is 100% of The Viewport
Firefox Not Displaying Properly: Before and: After Pseudo-Elements
How to Style Inner Elements of Custom Polymer Element Using External Styles