so ive been working on a small nodejs project and some of my users recently see weird black bars on it, i have no clue what might cause them and i cannot reproduce them at all.
here is a screenshot:
their browser version is Firefox 9.0.1
does anyone have an idea what might cause them?
update:
the problem still exists, i made one of the users turn off his javascript and he says that he still sees those black bars. i also made him install firebug and he says that he cant select the bars - only the elements underneath them. (dunno if he did it right though)
its quite strange, the only elements he sees right from the start are the ones which i positioned fixed.
ive been able to reproduce the bug on my laptop and found out what was causing the black bars:
my header had an overflow hidden attribute and as soon as i removed it everything was working fine again.
but i still dont know WHY this would happen. i'm using a linear gradient as a background in my header and a heading with multiple text shadows.
maybe this caused the bars on certain graphic cards.
Related
On my website http://uus.diamedica.ee/et/tooted/veterinaaria/6 is having strange 1px graphical glitches in and around the red menu bar, that only occurs in MS edge. It's like small bits are bitten out of the menu ribbon, thus making it look uneven. I've tried changing fonts, backgrounds, margins, paddings, etc. And nothing seems to make it go away. I've tried different zoom levels, but still the same after refresh.
Funny thing is, if you hover the menu items, then some of the bugs go away. Is anyone else having similar problems in MS edge and knows what´s causing it? Image below.
additional screens
http://design.imago.ee/test/diamedica/screen1.png
http://design.imago.ee/test/diamedica/screen2.png
Somehow i was able to fix the problem (at least in the computer that it appeared in the first place) by giving .menu-ribbon position relative, z-index 2000 and bottom value -1px. The issue should be still available to see in the draft version for those who are interested, http://design.imago.ee/Diamedica/html/index3.html is the url, open it up and hit refresh once after you´ve first loaded the page. At least im still seeing it in the draft version.
I also try to make a test by normally visiting the site in Edge.
Site looks correctly without any issue.
Below is my testing result.
Let us know, If there is anything that we are missing.
We will again try to make a test to reproduce the issue.
Are you working with low memory or with so much load on Edge?
Try to close all other site and open your site and check whether you can produce the issue or not.
So, here's a weird issue I've come across with Safari on Mobile—I suspect there's one root cause for all of it, but have not been able to figure it out:
Links wrapping images don't cover the full width and height (as they should screenshot below), just the upper left corner
Linked Buttons only work on the left half
Links with: hover will hang on the hover and you have to press through
To make things worse, development tools that are supposed to simulate iPhones don't show anything funky—the whole image/button should be linked, etc.—but when you use the site with an actual device, the above happens.
I know, I know, this feels like such a basic question, but I've been banging my head against it for two days now.
Here's my testing page, but you'll see it intermittently across the site: https://redcowmn.com/testing-safari-ios-issue/
Is there a stray line of code that tells Safari to misbehave?
Even an ultra simple <p>Hi</p> acts unreliably.
I'm building on the X Theme framework on Wordpress (where I've got 20+ other sites), Yoast SEO, Wordfence, Gravity Forms, WP Rocket (in Safe Mode), WooCommerce, and Stripe for WooCommerce.
Thanks, folks.
Modal screen!
I had a modal screen acting like some sort ghost element, screwing with the z-index, etc., etc. That's why only parts of the image were active.
Very strange that only Safari had an issue with it, but anyways, that was the issue.
I guess that's what I get for trying to hiding a required ugly embed off screen... :)
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I've been working in this tooltip library since yesterday. I don't know if this problem is for my sleep or what, but I can't figure what's happening.
The subjacent idea about this tooltip library is simple: The user adds in any HTML element the custom data attribute (I mean data-) with the message that he wants to display in the tooltip, and it has to appear. There are some options to add, like the orientation of the tooltip and if the user wants to "cut" the words inside the tooltip.
Here's an example:
<div data-msg="Hi, I'm a tooltip with a text veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery large" data-orient="right" data-break="yes">Hover me and the tooltip will show!</div>
Everything is fine with bottom, right and left orientations, but when I add the top orientation, the browser adds a species of "border" at the bottom of the tooltip.. I don't know why, but I can't fix it.
Is strange because in the others orientations the problem don't occur.
You can see the problem in the below image (the first tooltip has data-orient="top" and the second tooltip has data-orient="right".
If anyone knows how fix this problem, I'd like to explain me what happens.
Here's the Fiddle.
Thanks,
Leo!
EDIT: I'm working with Chrome 28 version and my OS is Windows 7.
This is a workaround, not a real solution - but shouldn't have any serious side effects in this case (no guarantees, though, see below). And I have little explanation other than this appears to be a Chrome rendering bug.
Add this to [data-msg]::before:
-webkit-backface-visibility: hidden;
backface-visibility tends to fix quite a few Chrome rendering bugs, regardless of the fact that it actually has to do with 3D transforms - it appears to fix this case too.
The reason that it fixes problems possibly has to do with Chrome using a different (hardware accelerated) transition engine the moment you add anything to do with 3D transforms to your element. This may have performance penalties, which leads us to another non-sensical rule that at least used to improve performance if you run into problems:
-webkit-transform: translate3d(0,0,0);
ETA: -webkit-transform alone actually seems to be enough to fix the problem. Experiment with the two, and see if any of them cause other problems.
There have been reports of -webkit-backface-visibility crashing iOS. So do test it there, and try with translate3d instead - or disable the fix specifically on iOS (and live with the bug if it appears there).
As posted in the comments, here's a more minimal example of the problem - although it sometimes fails to... fail, it should mostly have the unwanted darker border at the bottom:
JSFiddle
The bug seems to be caused by transitions combined with border-radius and opacity. Possibly inline-block and padding have a role in the bug too, but sometimes their removal fixes the border, sometimes it doesn't. I hope the backface-visibility workaround is more consistent.
I've been wrecking myself trying to figure out what is going on with this big of html. It renders correctly in latest Firefox, Safari and on chrome canary, but normal chrome renders these weird lines and I have no idea why.
I've create a JS fiddle with an excerpt of my code, it's part of a much larger project, but I'm seeing the rendering issue in the fiddle as well as in my app. I've attached a screen shot of what I'm seeing in the fiddle for reference.
Fiddle
Bug screenshot:
The red middle line shouldn't be there as well as the line to the left of "close". This is just one example, as I mouse over the modal I get lines appearing all over the place.
It makes for a less than stellar question as it's difficult to replicate. Resizing the browser helps to show the error. My fiddle has quite a bit of html and css. I don't expect anyone to actually comb through it and fix the issue. I just want to be thorough in presenting the problem.
I've tried looking online but I haven't been able to find anyone reporting the same issue as far as I can tell.
If anyone has any ideas on what may be causing this, how to fix it or point me to a relevant link/SO question I'd be very grateful.
Things I've ruled out/investigated:
- not caused by something else on the page, as I extracted it into jsfiddle and it's still hapenneing. I also removed the body content using the console in my app and it didn't make a difference.
- I dont think the gradients or transitions are causing it, as removing them didn't seem to have an effect
- possibly/probably related to absolute positioning? When I removed the position absolute on the main wrapper element I didn't see this occuring.
- I read that applying a z-index to these elements might help, but it did nothing for these issues.
TL,DR: Why does google chrome, but not canary or safari, show rendering errors on absolutely positioned elements with liberal use of css3 gradients, shadows and transitions?
When I remove the '-webkit-transform: scale(0.95)' on #vfs_uploader and the '-webkit-transform: scale(1)' on #vfs_uploader.visible, it displays fine: http://jsfiddle.net/cjc343/fzqPT/2/
I don't know how this affects Safari or if it has other implications in Chrome, but it does not appear to otherwise affect the layout in the example.