Last post Apr 01, 2020 03:10 PM by bruce (sqlwork.com)
Mar 15, 2020 07:24 PM|woodywoodpecker|LINK
As a newbie, I have some trouble with my application in Safari.
Layout changes completely in Safari.
Site is under construction on http://
I can't figure out why it goes wrong in Safari. It's a classic .net application with Bootstrap 4. I think it's definitely a HTML of css matter. But you never know.
Anyone an idea?
Mar 16, 2020 02:03 AM|Sean Fang|LINK
I tried your project in Safari and Chrome but I am not sure what exact the difference layout it is.
The layout is not as what you said "Layout changes completely" so that it is a bit difficult and inefficient to find out the difference in that amount of elements.
Could you please specify the problem?
For example, list some markups with the CSS (if you don't just use BS 4) and post the difference. That would be much helpful to target the problem precisely.
What's more, it would be necessary to know the version of your .net framework.
My testing screenshot:
Mar 21, 2020 10:52 PM|woodywoodpecker|LINK
Thanks for your reply,
The website was reachable on subdomain http://. I guess you went to the main domain huismakelaar.be. There was a redirect active.
I’ve uploaded the site on the main directory http://
Problems with Safari and bootstrap:
Images are not adjusted in dimensions, bootstarp carousel is not working fluently in transitions, transitions are quite ‘stiff’, etc.
Something is not okay and can’t figure out why
Mar 23, 2020 09:23 AM|Sean Fang|LINK
I retried this url and could not reproduce the problem as you described.
1.The images was automatically responsive to the page and self-adjusting properly.
2.Bootstrap carousel was working well except that the carousel always keep static for a while (like 5~10 seconds) and then will do the animation.
Have you used another device to test if it works as you expect?
If it displays the images not properly as well, then it should be an error within the safari browser.
You could use Safari developer tools to debug what the behind reason it is.
Another suggestion is to remove the self-defined CSS class and leave the bootstrap Css class in your markup code. Then you could check whether the bootstrap Css class and js works or not. That way, you could identify the problem much easier without interference
of others codes.
Hope this can help you.
Mar 25, 2020 03:29 PM|woodywoodpecker|LINK
Thanks for your feedback, Sean.
I was a bit surprised when you couldn't reproduce the problem. We could reproduce the problem on a mac desktop.
For this, I added screenshots as you can find in the links below.
Thanks for the tips about debugging en removing css for interference. I will check this out.
Mar 25, 2020 06:47 PM|bruce (sqlwork.com)|LINK
it looks like you are using the old windows version of safari which is no longer supported and does not match current behavior. you should stop using it. chrome is a better tester on windows. iPad's safari better matches desktop safari now days.
Mar 30, 2020 09:13 PM|woodywoodpecker|LINK
Mar 31, 2020 12:51 AM|bruce (sqlwork.com)|LINK
safari mobile is slightly different than safari mobile. Chrome is the best you can do on windows. On a Mac you can test Chrome, Safari, Firefox and edge, Also android and iOS mobile via emulators.
are not required.
Apr 01, 2020 01:56 PM|woodywoodpecker|LINK
Tnx, that's a very helpful explanation. So that's also why detection of safari can be seen as chrome? And Firefox uses a different, his own developed, base + Gecko as render engine?
Apr 01, 2020 03:10 PM|bruce (sqlwork.com)|LINK
yes , firefox uses Gecko instead of webkit. The firefox team has a strong belief that for html to be truly a standard, there needs to more than one code implementation. But they are a lonely voice. Most browsers other than Safari and Firefox are now based
on the Chromium browser, so there is even even less diversity.