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.
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.
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.
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.
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.
Tnx, Bruce. Indeed it looks like the problem came from the outdated browser.
Is there, by the way, a browser/emulator that gives the same results as the current Safari?
Safari like chrome is based on the open source webkit. They have different extensions to WebKit and different JavaScript engines. Safari & Mozilla use nitro, and google uses V8. Safari and chrome both use the same WebKit debugger.
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.
Note: webkit is just the rendering engine. Chromium is the base browser (render, JavaScript, & UI) that chrome, opera and edge are built from. also as Mac seems to have won the web developer/designer mindshare (even at Microsoft) window emulator versions
are not required.
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?
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.
Member
3 Points
13 Posts
Layout changes completely in Safari
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?
Greetz, W.
Participant
1110 Points
299 Posts
Re: Layout changes completely in Safari
Mar 16, 2020 02:03 AM|Sean Fang|LINK
Hi, woodywoodpecker,
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:
Chrome:
Safari:
Best regards,
Sean
Member
3 Points
13 Posts
Re: Layout changes completely in Safari
Mar 21, 2020 10:52 PM|woodywoodpecker|LINK
Hi Sean,
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
Participant
1110 Points
299 Posts
Re: Layout changes completely in Safari
Mar 23, 2020 09:23 AM|Sean Fang|LINK
Hi woodywoodpecker,
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.
Best regards,
Sean
Member
3 Points
13 Posts
Re: Layout changes completely in Safari
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.
https://a.uguu.se/S02l4ZJz8ueL_Safari_1.png
https://a.uguu.se/3ouj6D4FEMfl_Safari_2.png
https://a.uguu.se/L1suQHpjry4i_chrome_1.png
https://a.uguu.se/RxrZSqAhhCht_chrome_2.png
Thanks for the tips about debugging en removing css for interference. I will check this out.
Regards,
W
All-Star
55574 Points
14299 Posts
Re: Layout changes completely in Safari
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.
Member
3 Points
13 Posts
Re: Layout changes completely in Safari
Mar 30, 2020 09:13 PM|woodywoodpecker|LINK
Is there, by the way, a browser/emulator that gives the same results as the current Safari?
All-Star
55574 Points
14299 Posts
Re: Layout changes completely in Safari
Mar 31, 2020 12:51 AM|bruce (sqlwork.com)|LINK
Safari like chrome is based on the open source webkit. They have different extensions to WebKit and different JavaScript engines. Safari & Mozilla use nitro, and google uses V8. Safari and chrome both use the same WebKit debugger.
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.
Note: webkit is just the rendering engine. Chromium is the base browser (render, JavaScript, & UI) that chrome, opera and edge are built from. also as Mac seems to have won the web developer/designer mindshare (even at Microsoft) window emulator versions are not required.
Member
3 Points
13 Posts
Re: Layout changes completely in Safari
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?
All-Star
55574 Points
14299 Posts
Re: Layout changes completely in Safari
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.