I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.
Related
Has anyone experienced infinite scrolling issue in safari 12.2? As well as positioning using flexbox?
jQuery is used to trigger data fetching when scrollbar reaches the bottom. It does function but buggy at times.
In terms of positioning, i have tried using floating a button to the right, flexbox but I ended up using tables because it doesn't position itself to the right like newer version of safari.
I am struggling with an application using custom elements that is just not working properly in Safari. Here is a screen shot with what Safari is showing v what it is supposed to show in chrome. It was taken on a Macbook Air, although I originally discovered the issue on an iPad.
However this screen shot shows that web inspector does think there is an element there whose foreground color is white and opaque (I set those deliberate) even though nothing is displayed.
So why is Safari not displaying the elements?
For anyone else out there wondering about the same thing. I think I found the answer!
One of the surrounding elements has some css with overflow-y: auto, but without a specific height. I believe what is happening is that safari has shrunk that element to height 0, but that the inspector is still showing where the element would have been, if its not been hidden by a zero length scroll bar, scrolled so that item is below the cutoff area of the scrollable element.
I haven't yet figured out why it works in chrome, my guess is slightly different handling of overflow.
A demo of the bug can be found here: https://github.com/Twinbird24/vue-scale-transition-example/tree/simplified
A video demonstration of the bug can be found here: https://gofile.io/?c=4HwzAT
Here is the code on Stackblitz: https://stackblitz.com/edit/vuejs-starter-ndpy8b?file=styles.css. Click on the css file (styles.css) to change the scale and you'll discover the bug.
The code found in the GitHub/ Stackblitz linked above contains two divs that are fading in and out through the use of Vue transitions. There is a third div that is absolutely positioned above these transitioning divs. The bug appears when you change the scale of the container that holds all of these divs (look for the commented CSS for the source of the bug). After a certain point, the z-index of the third absolutely positioned div will break, and it will become covered up by the transitioning div. This bug appears in Chrome, but doesn't seem to be apparent in Firefox.
Is there a trick to getting datatables.js horizontal scrolling with fixed columns to work on mobile? Things work great on desktop or in chrome-dev with dimensions of an iphone, but when actually viewing on an iphone, scrolling horizontally moves the entire table and the fixed columns don't work.
OK - the issue here was that things were in an iframe, and mobile browsers seem to take control of sizing of iframes and this is what was causing the problem.
Adding an inner div and some css per https://davidwalsh.name/scroll-iframes-ios seemed to address it.
I have a WebView that is working perfectly. When I scroll it (up or down) past it's content I see a white area "Behind" the web page. (had an image here, but couldn't post due to being new).
I would like to set the overscroll color to clear.
To be precise I have played with setting the WebView background to transparent, and that does not achieve the desired result. That makes the entire page clear to the background of my app. I only want to see the app background if the user has scrolled past the contents of the window.
Any ideas?
Try this:
yourwebviewname.opaque=NO;