11

To test or see the bug:

(Note: Bug has been replicated on the link in Second Update, since the question was first posted)

  • go to sukritchhabra.com/importr
  • Type Bootstrap in the search bar.
  • Select bootstrap from the suggested list (Note: If you do not select from the list but press enter in the search box, the page will break and you'll have to refresh)
  • Once Bootstrap loads, press the green button 6-7 times (until a scroll bar appears)
  • Now delete a few of them, and the box-shadow will disappear.

I've tried a couple of things so far. Tried logging the box-shadow property of .importrLinks after every delete to catch where it is changing but no change is actually happening.

Also tried explicitly assigning box-shadow after each delete, and that doesn't help either.

During my search for a solution, alot of somewhat similar bugs were because of the z-index but I tried assigning custom z-index's and that didn't help (although I still believe this is something I haven't tested completely since I was assigning random, i.e., altering higher and lower, z-index's just to detect changes).

UPDATE

As suggested in the comments, I should've provided sample code instead of the complete website and I agree. But, as I have mentioned in the comments, I wasn't able to replicate the bug, on a fiddle.

Nevertheless, here is a link to the jsfiddle: https://jsfiddle.net/sukritchhabra/d3xfyc6t/5/

The bug still doesn't take place in the fiddle but, is still there on the website. The code I've used to create the fiddle is picked from the website. Instead of getting arguments for the addLink function, I've just passed constant strings for testing.

Second Update (Bug Replicated)

Figured out the bug is happening because the container has a float: left;. Have changed it on the fiddle and the bug is now replicated on this fiddle.

Link to fiddle: https://jsfiddle.net/sukritchhabra/d3xfyc6t/6/

Third Update (OS issue?)

I had been working on a Mac so far. I just tested it on a Windows machine, and the bug seems to be only on Mac. Am not a 100% sure if that is the root cause, but I'll definitely be testing it on other machines just to be sure.

Meanwhile, if anybody can see the bug on a Mac and not Windows, please do let me know here.

Community
  • 1
  • 1
Sukrit
  • 308
  • 2
  • 12
  • Please try to include the smallest parts of your code that reproduces this problem to help us help you. – Salketer Feb 29 '16 at 09:49
  • I tried creating a fiddle, but wasn't able to replicate the issue there. – Sukrit Feb 29 '16 at 09:50
  • you may be lucky, but it isn't a realistic expectation to get people to get through your entire site trying to figure out the issue, so you ARE going to have to try and narrow the issue down to a snippet... – benomatis Feb 29 '16 at 09:52
  • that would mean the issue is coming from somewhere else... Try adding more and more code until the problem reappears. – Salketer Feb 29 '16 at 09:53
  • Please note, that I've updated the question with a link to sample code as suggested above. But the bug still can't be replicated as I mentioned before. – Sukrit Feb 29 '16 at 10:10
  • Please note that I've been able to replicate the bug since my last comment and it is reflected in the fiddle also. – Sukrit Feb 29 '16 at 10:21
  • The fiddle is showing the box-shadow perfectly even following the steps you said. I'm in Firefox 44.0.2 – Marcos Pérez Gude Feb 29 '16 at 10:23
  • I made a test on firefox and it works perfectly! I don't see the bug you mentioned – Khaled Al-Ansari Feb 29 '16 at 10:24
  • I just tested again and you're right its working now. I have no idea why. The bug still exists on the website though. For the time being I'm I'm going to remove the secind update so that people are not confused by it. – Sukrit Feb 29 '16 at 10:27
  • NOTE: The bug is now definitely replicated (unless it somehow magically fixes itself again). Have added the second update back – Sukrit Feb 29 '16 at 10:31
  • 1
    Impossible to reproduce in the last fiddle again. No in firefox nor in Chrome – Marcos Pérez Gude Feb 29 '16 at 10:40
  • Marcos, it is definitely replicated for me here: https://jsfiddle.net/sukritchhabra/d3xfyc6t/6/ This is the link from the second update – Sukrit Feb 29 '16 at 10:41
  • @MarcosPérezGude I just posted the third update after testing it on a Windows machine. Were you working on a Windows or a Mac? – Sukrit Feb 29 '16 at 12:44
  • Mac and Linux, but theorically the S.O. doesn't affect, it's the browser. – Marcos Pérez Gude Feb 29 '16 at 12:59
  • @MarcosPérezGude, in that case, is it happening for you on the website? Or it isn't even happening there? – Sukrit Feb 29 '16 at 14:46
  • I can't reproduce the problem in linux/mac with firefox/chrome. It's as clear as this. – Marcos Pérez Gude Feb 29 '16 at 14:47
  • 1
    For the second updated link (jsfiddle) I can see the bug in a mac but not on my pc. I dont think its an OS thing though... its weird. – Vishrut Reddi Mar 01 '16 at 04:17
  • Have you tried adding anything else but a link to a css? – Asons Mar 02 '16 at 19:48

2 Answers2

2

Confirmed the bug in Chrome on OS X on your fiddle. I checked and the same seems to happen to other CSS properties, not just box-shadow. For example, if set, border is affected in the same way and disappears when you remove items. I think it's got something to do with the combination of CSS properties on the container when overflow is set to auto. So for example I noticed that if you remove float: left, box-shadow stops disappearing. So to me it seems to be a browser rendering issue, I'm not sure why it's happening only on OS X.

Anyway, if you need to keep CSS exactly as it is, here is a solution that is far from elegant, but it works:

https://jsfiddle.net/d3xfyc6t/8/

It involves doing a browser repaint on the container every time you remove an element:

$('.importrLinks').hide().show(0);

This technique is taken from here:

https://stackoverflow.com/a/8840703

Community
  • 1
  • 1
ilokhov
  • 645
  • 1
  • 4
  • 11
  • This is definitely a valid work around. But like you said, and I agree, this isn't an elegant **solution**. Nevertheless, even though this seems like a hack, it is probably the best way to work around the bug at this point. Since the last time, I updated, the bug has vanished on the site but is still there in the fiddle. – Sukrit Mar 08 '16 at 13:34
-1

Oddly, if you remove the float on the container DIV, it fixes the problem: https://jsfiddle.net/d3xfyc6t/10/

You should also add the box-shadow vendor prefixes for other browsers:

box-shadow: 0 0 10px 1px #e2e2e2;
-moz-box-shadow: 0 0 10px 1px #e2e2e2;
-webkit-box-shadow: 0 0 10px 1px #e2e2e2;

Edit: Mimic a left float by replacing float: left with position: absolute; left:0; this gets rid of the problem. You may also need to set any outer containers that contain the code you posted to position: relative; https://jsfiddle.net/d3xfyc6t/11/

annieXo
  • 156
  • 8
  • I understand that removing the float handles it. That is what helped me identify the bug in the first place. But the code on the fiddle is part of a larger system and it is really important that the `float` property still remain. That is unless, removing the float and mimicking it with some other properties fixes the problem. – Sukrit Mar 08 '16 at 20:40
  • Try replacing `float:left;` with: `position:absolute; left: 0;` This will work well if the code you posted is not nested in other container elements on the page. If it is inside some container, also set the external container to `position: relative;` to mimic a left float. – annieXo Mar 08 '16 at 21:40
  • ^ Yup, that should fix it: https://jsfiddle.net/d3xfyc6t/11/ Updated my original answer. – annieXo Mar 08 '16 at 21:48
  • Like I said, it is part of a bigger system, the link to whose website is given in the first few lines of the question. I tested it over there and your suggestion might be fixing the bug, but it doesn't mimic `float` in the least. Feel free to test it out on the website. – Sukrit Mar 08 '16 at 21:55
  • Sorry, I didn't see the link to the whole website. Now that I have tested it there, this replaces float without breaking the layout: `position: absolute; right: 5%;` But like you, I don't even see the bug on the actual website now. Strange! – annieXo Mar 08 '16 at 22:03