I'm been having some problems with my site redesign, I have a section of goals in the case study that is sticky and once you pass an image that goal gets crossed as done. As I'm using full-width images I wanted the goals section go underneath and as you see it again when scrolling the goal is already crossed, it works great on chrome and firefox but not in safari. Is weird because when I use the web inspector the element in safari behaves as it should for a moment and it goes under the image.
Does anyone have an idea of what can be?
Example link
adding transform: translate3d(0,0,0); to the non sticky div seems to fix it in Safari
This must be a Safari bug with their implementation of position: sticky
I've reported this as a bug to Apple - maybe do the same?
Related
I am working with videos and sometimes need to show a short video over a stream. But in Chrome the videos start flickering kind of like underlying video is leaking into the one on the top. I tried position: absolute, transform: translateY(-100%) and grid-area: 1/1/2/2 and the same result is produced in each case. It happens even if there is another non-transparent absolute positioned layer in between the two. It only works when an underlying video is hidden completely using visibility: hidden, display: none or other similar technique.
You can check this StackBlitz to see for yourselves.
It works properly in Firefox but not in Chromium based browsers.
EDIT: it seems that this doesn't happen to everyone and is somehow linked to the hardware acceleration feature in Chrome. When I disable hardware acceleration the flickering stops for me also. Looks like a Chromium bug to me.
I have a very strange behaviour only on Chrome. I want to style checkboxes on a filter layer. An example you can find on http://jsfiddle.net/2wpe0unu/
The filter criteria are dynamic and based on a REST call. It works perfect, but with some CSS3-features I'm using the labels cannot be clicked. To demonstrate this I've created a fiddle on http://jsfiddle.net/3oL5tmfp/1/ Open the Layer and try to click the checkbox.
Some thoughts to solve this problem:
label without position: relative; – it works, but the styled checkboxes are lost in space
ul without CSS-columns – it works, but I have no columns ;(
layer without transform: translate3d(0,0,0) – it works, but I do not have any hardware acceleration
The problem occurs only on Chrome (Mac & Windows) and Mobile Chrome (Android & iOS). It works like expected on IE10+, Safari, Mobile Safari and Firefox.
For me I've solved this by avoid transform on the layer (solution 3), but I would like to understand this strange behaviour.
May it's a bug of chrome engine? Any suggestions are welcome.
Ciao
Ralf
on your ul add z-index: 2; and position: relative (to make the z-index work) seems to solve the problem in your fiddle.
Also would recommend adding a clearfix to your content is-open since you say the checkbox list will populate dynamically.
So I have a video playing in the background of a splash page, it is running on a loop with no available controls and I have text and an image sitting on top of it. I set it up as a with z-index: -100.
This works perfectly in Safari and Firefox, but in Chrome and Opera when the page loads everything on top of the video disappears. As soon as I resize the window everything re-appears, but when I refresh it has the same problem.
I'm not really sure what to try at this point or if this is a common problem. Any help would be great, we're trying to launch the site tomorrow.
Edit: Here's a link to the site. I was hoping this was a common enough problem that there would be a well known fix. http://jessemacdesign.com/upload/splash.html
For me, it's working in Chrome and Opera no problem (so check you don't need an update!). However, I wouldn't recommend using negative z-index as there's not really any point in doing so. Try this for your z-index and see if it works:
video#bgvid {
z-index: 1;
}
#bgimg {
z-index: 1;
}
I would also remove the z-index from #main as I don't feel it's needed.
Failing all of the above, try structuring your page differently so your video is in it's own div. I can't recreate your issue myself though, it's working in Chrome and Opera for me.
Original: Any chance of a link? It would be hard for me to help you without viewing the code directly!
The full scope of my specific issue is likely too deep to include in a question here. Instead I am looking for clues.
The nature of the problem has to do with overflow: hidden. In Internet Explorer 11 it is working sometimes and at other times not. I have an element that is larger than the body and I have set the body element to overflow: hidden. Sometimes the page loads and works exactly as expected, but in about 60% of my tests the browser just ignores this property. If I look in the inspector the property and value are present, yet are not having any affect on the rendering of the page.
I have tried using a container element instead of the body, but the same thing happens. opening the inspector panel while scrolled to the top of the page will sometimes fix the issue. Any ideas?
There is a lot going on with this layout which is why there is no fiddle. Everything else works fine in IE. There are no errors in any browser and the layout works perfectly in all other browsers I have tested (Chrome, Safari, Firefox, Opera and IE 11).
Are you using a display properly on that div or element? If you have display: inline then try to change to display:block.
I am not sure why this worked but I just positioned the body fixed. That seems to work.
I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. Can´t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.