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
Related
When resizing the browser window in order to see how the elements inside the flexbox rearrange themselves, Google Chrome cuts one of them off at a very specific resolution. It works just fine otherwise. This doesn't happen in Safari or Firefox. The flexbox is inside a section with height: auto
I don't know what to try here. This is beyond confusing...
I am building a static page with Bootstrap 4.0.0 and it works on all media and browsers except Safari and Safari mobile.
It seems they don't recognize the height of the container and don't allow scrolling. Here you can see the page and the code:
https://www.intergraf.it/test/
The body is green, "jumbotron" is blue and the container is red.
Can you help me please?
I think I solved it by removing the "min-vh-100" and "d-flex" classes from the jumbotron
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
Take a look at this fiddle:
http://jsfiddle.net/jvvmU/2/
Render it in Firefox and IE7.. In Firefox, it works fine, but in IE, a long scrollbar shows.
How to fix this bug?
Note: I've also this problem in Android based browsers, in landscape mode.
The cause of the incompatibility in IE7 here is that the width of the html document is smaller than the width of the element labelled id="e". In the fiddle that you've provided the view port is about 660px wide, if the element e is 660px or less, then the green box appears as in other browsers.
What are you trying to achieve here? Are you sure that css is the best way to achieve your goal?
I have a stylesheet and use overflow:scroll; in my css to blend in scrollbars. It works in Firefox but not on my iPad in the safari browser. There, no scrollbars are shown but it is possible to scroll with two fingers.
Now, is that normal that iPad doesn't show scrollbars? That would be stupid somehow.
You might want to turn it on with: -webkit-overflow-scrolling: touch;
Yes, I believe that is normal behaviour from iOS3 and upwards.
You might want to check it on android, as android does not support overflow:scroll at all, from what I am aware (no two fingers, no scroll bar, no way to view content beyond the fold)
More information on iphone/ipad scrolling