Bootstrap: modal with inputfields - line bug with Edge browser and 150% zoom

[twofourjack]

Hello,

Requirements to reproduce this bug:

• Microsoft Edge Browser 38.14393.10660 (Maybe all versions of Edge)
• Windows 10
• On Windows there is a option for "Customize diplay setting" where you can change the size of text, apps and other elements. There are zoom precentages (100%, 125%, 150%) -> Change it to 150 %
  
• big display/monitor (resolution 1920x1080)

1. Go to http://getbootstrap.com/javascript/ to section
   "Varying modal content based on trigger button" and klick on button Open modal for @getbootstrap

2. Now you see this:
   

3. If you klick into fields on modal or hovering with mouse on the 2 buttons and the cross to close the modal, there are display some lines. The positions of the lines are different, but the lines will every time shown:
   

btw: I am project manager for a website agency and we made a website for our customer. This website is available on https://www.bestlance.de/. On the frontpage on top of the right you can login (icon with arrow and door). If you click on this login button there opens a bootstrap modal. Here we have same problem which a wrote above:

I search very well on internet and github bootstrap issues but I found nothing about this problem. Our developers have still yet no solution for this problem. Our problem is that our customer want to fix this apperance bug, it is for him high prior and we try to debug this issue already some days and no solution.

Have you some advice to fix this problem?

• Bug is only shown with the requirements which a mention above.
• On Firefox, Chrome there is no bug. No matter which zoom I have setting in Windows 10.
• If the zoom is setting to 100% (or 125%) there is no problem. Even under Microsoft Edge it works.

Thank you for all.
I hope so much to get an answer with a solution - that would be awesome.

best regards,
Jack

[FezVrasta]

Looks like a specific rendering bug of Edge... You should report it to Microsoft Edge issue tracker

[twofourjack]

ok thanks for your information and your time.
I find same issue in Microsoft Ege issue tracker:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4540401/

Maybe you can close this ticket, because it seems that it is a Edge bug.

[Johann-S]

Moreover BS do not support Browser zooming see : http://getbootstrap.com/getting-started/#support-browser-zooming

[patrickhlauke]

also note there are a few edge bugs relating to visual artifacts/lines on http://v4-alpha.getbootstrap.com/browser-bugs/

[dleger]

I have exactly the same issue (Bootstrap 4.0) with edge and Internet Explorer 11.

I have 2x15" retina screens (UHD 3940*2160 ). One is my laptop UHD screen, the other is a Cintiq pro 16. I use 250% zoom factor with windows 10.

If I use a FHD resolution (1920x1080) at 125%, the problem disappears immediately. So this is DEFINITIVELY a rendering bug from Microsoft. :/

[TheCommunistCow]

FYI for anyone who couldn't find a quick fix for this.

It seems to be fixed by setting:
.modal-content {
background-clip: border-box;
}

This causes the border to be fairly ugly, so you might want to also do
.modal-content {
background-clip: border-box;
border: none;
}

[dleger]

Well, this is then a workaround. I will test it, thanks. But The fix should be provided by Microsoft in their browsers. This is clearly a Microsoft bug.

[sanjayaketan]

I also face same issue. Is there any way to fix?

[alabastida]

We are still facing the same issue son Edge and IE with Bootstrap 3.3

[dilipkumaarvr]

still, we also facing the issues on IE browser. If anyone knows the solution please share the link with an example file. Thanks in advance

[sanjayaketan]

I have added below class in my CSS file and now working fine for me.
Please try this.

.modal-content {
background-clip: border-box;
border: none !important;
}

[dilipkumaarvr]

I have added below class in my CSS file and now working fine for me.
Please try this.

.modal-content { background-clip: border-box; border: none !important; }
Thanks Sanjayaketan. for now its working fine.

[xenogew]

@sanjayaketan @dilipkumaarvr thanks, you guys save my life