I am trying to implement an overlay with a fullscreen images below each other. It needs to scroll. But scrolling does not work in Safari. It works in Chrome/Firefox. I have only tested the newest versions.
Have tried to make the demo simpler, removing ImageSrcset but it does not help.
Codesandbox (please open the browser in new window/tab to see problem):
https://codesandbox.io/s/github/secretlifeof/react-overlay-images/tree/master/?fontsize=14
Github repo:
https://github.com/secretlifeof/react-overlay-images
Do I need to implement scroll lock so that the underlay does not try to scroll? I have tried to look at how others have implemented overlays, but I cannot understand how this implementation is different.
Versions:
Safari: v12.1.2
Related
I have a div with style overflow:hidden and white-space:nowrap. Then a button that scrolls the div left via scrollLeft += 50. Works fine until I add scroll-behavior:smooth to the CSS of the div. Then it doesn't scroll at all in Safari 15.4. On all other browsers I have tested it works fine. Some ignore the smooth scrolling but it doesn't break the scrolling. In Safari it breaks the scrolling. I have setup a simple test page for this error scrolling test. What am I doing wrong? If this is a bug in Safari any ideas for workarounds?
This is a bug as of Safari 15.4.
Previously, it didn't support smooth scrolling and would scroll instantly. Since the new update, they have introduced an incomplete version of smooth scrolling, the scrollbar is required to be visible for it to work.
The current workarounds are to either use a scrolling library, making your own version/polyfill or checking useragent and give it a version without smooth scrolling if it's Safari.
WebKit Bugzilla Link: https://bugs.webkit.org/show_bug.cgi?id=238497
I am encountering a weird issue once again, and it again happens to be in Safari on iPhone. Safari on macOS works fine, and so do all other major browsers.
Here's the issue: Embedding a YouTube video in an iframe transforms the iframe to the left, out of the viewport. There is no transform applied to the iframe, or any parent elements. I double checked, but I am out of luck. Funnily enough, there's two quirks:
The clickable area stays non-transformed. I can interact with the content as if it was in its correct position.
Switching to the tab overview renders the video correctly.
Here's a few screenshots to demonstrate the issue:
I have also created a JSFiddle that reproduces the issue, with markup directly out of the project. Visit it on mobile Safari on iPhone or with a simulator on macOS to see the problem in action. (Use this link for fullscreen access)
Any help would be greatly appreciated.
I made a carousel to fill 100% height and width of browser and it does that fine on a desktop or in protriate mode on a mobile but when switched to landscape the display breaks. I made a bootply but it doesnt show the error im refering to. Maybe its caused by the form I have added?
http://www.bootply.com/BKl0fXVMrj
You can see the actual error here. Open dev tools select a iphone4,5,6 galaxy s4,5.. pretty much any current smart phone and you will see what I mean.
http://www.casouza.com/homelist
After my previous comment I looked deeper into this, try the code below in your CSS.
#bg-slide-carousel .carousel-inner {
position:fixed;
}
This makes the background carousel stay with the viewport. I've tested this in the chrome dev tools emulator with the site you posted and it appears to work fine.
I am in the process of making a responsive mobile website.
When testing on my phone, I noticed that I couldn't scroll vertically past something that could be scrolled horizontally.
Here is an example of what I mean (sorry you can't see the horizontal scroll on your phone but just trust me that it works).
Mobile Webkit browsers can't scroll past the table in this example:
http://jsfiddle.net/tArEy/
Then I commented out the following line to make the vertical scrolling work. However, this made the horizontal scrolling a little bit choppy.
-webkit-overflow-scrolling: touch;
Mobile Webkit browsers can scroll past the table in this example, but it's a little more glitchy.
http://jsfiddle.net/tArEy/1/
Does anyone have an idea of how to fix this using CSS only?
The demos have to be tested on a browser. (I'm running the Chrome browser on Android. I assume the iPhone has the same problem).
Edit:
It turns out that scrolling horizontally is horribly buggy in mobile webkit browsers without the following line in your CSS:
-webkit-overflow-scrolling: touch;
However, that line makes it impossible to scroll vertically so I'm kind of at a standstill. Other non-webkit browsers scroll horizontally just fine.
Edit 2:
I got my hands on an iphone. the overflow scrolling is hardware accelerated and works flawlessly. This seems to be a Chrome for Android problem only.
This was a bug in chrome for Android only. It was fixed in a recent upgrade.
this might help with the problem: http://filamentgroup.github.com/Overthrow/
overflow-scrolling is only supported in newer phones. when i've tested i've seen if newer phones have slight scrolling problems supporting android 2.x and ios4 will make you cry.
if you are scrolling horizontally you might want to rethink your design though.
The code : http://jsfiddle.net/YM5Cb/
Please take look at the fiddle.
I am trying out webkit models. I was experimenting with horizontal box layout.
See the top right panel, its height is more than its parent.
How to make its height same height as its parent
The above demo works only in chrome and safari. I am learning to create HTML 5 apps for android and ios device. Thats why i am using webkit. So its enough for the code to work on chrome and safari, so it will work fine in ios and android devices
maybe you can try to set the property height:auto for child boxes/divs