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
Related
The background-attachment:fixed is working well on Chrome but on safari, it does not work. How can I fix this issue?
for fixing background image please use width and height css element and make sure background-image property use properly.
I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox.
I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though.
I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns.
Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.
Chrome renders:
Safari renders:
I very much like the Chrome way of rendering the columns, so I was wondering if there is a way to force Safari to render the site this way, possibly without altering the html layout at all.
notes: Firefox renders the same as Chrome and needs no fixing. I'm not developing for IE, so I don't know how that renders.
I had the same issue but min-height didn't work. I had the column-count set on a Bootstrap .col-md-12 container and this was the issue for me.
I added a child div with the class required and it worked perfectly
add a min-height to <ul> seems to fix the issue
nav ul { ... min-height:50px; } /* < add */
tested on Safari 5.1.7 (7534.57.2) for PC
bug is referenced here too: http://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1
I had a similar problem with the columns content showing up on Safari with a height of 1px. I added "min-height: 100%" to the element and all looks good. I also have "height: 100%" on the body/html and containing elements, assuming this is how I got it to work properly.
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
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.
We're having a problem with our website at www.tonerize.com, in regards to the blue menu at the top center of the page. In IE / Firefox / Most browsers, the menu displays correctly and has a background image.
However, in Webkit based browsers (Chrome, Safari, etc), the menu doesn't have a background and it seems like the padding is not being used. Is there any reason for this?
We figured this out. Webkit wasn't liking on of the tags in the CSS, which other browsers apparently ignored.