Border-Radius Interior Tearing in Certain Browsers - html

Hoping someone has seen this before. I'm only hearing about this bug from two users and they're both using tablets (I can get specifics, if it matters) for their workstations (I know...). When they view a website, if a button has a border radius, they see this...
http://www.tiikoni.com/tis/view/?id=69f1996
(i had originally wanted to post the actual image so it wouldn't expire, but I need more reputation - if you visit this page after the link has expired, basically, it shows a green button with rounded corners and a symmetrical white "tearing" across the object, meeting in the center - think green button with white X inside)
They've reported seeing this in Internet Explorer (fully updated) and Firefox.
Any ideas as to what is causing this?

The problem was resolved by rolling back a display driver. There was an odd play between the up to date driver and the docks.

Related

MS edge graphical anomalies

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.

Mobile Safari Hover/Link Issue

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... :)

iOS 8 / Xcode 6 is not displaying tab icons properly

Is anyone encountering this problem, and have a solution? See the images bellow.
I'm using 50px and 100px #2x images, named for example: smiley.png and smiley#2x.png correspondingly. However, when I set them on a tab view controller (using the images.xcassets) resource to smiley, for example, they appear too large for the tab.
I have gone forth and added bar item image inset specifications of 5px to try and mitigate the problem. Now they appear reasonably sized. However when I run the app in the simulator the icons size up and down and sometimes disappear completley from the tab, and re-appear when I switch to another tab. They enlarge and contract when double tapping on them... this is very buggy behaviour.
I want to know if this is just the XCode 6.0.1 or iOS 8 issue, or something I'm doing wrong?
I am having exactly the same issue. I am glad I am not the only one. The icons scale randomly every time you press them and finally disappear into zero pixels. The workaround I found was to select the tab images from your Supporting Files folder. Works fine for me with a 120 x 120 image.
It must be a bug, I hope it will be fixed soon.
Edit: above solution does not work! It was a mere coincidence, when I added another ViewController with exactly the same settings, it messed up again.
What does work is the solution mentioned elsewhere in this thread by Victor S: use 30x30 and 60x60 images and put them in a new Image Set in Images.xcassets. Don't use images from your supporting files folder with image insets from the Inspector Menu - Xcode 6 is pretty messy up there and the weirdest things start to happen.
I solved this problem by making my #2x images be 60px square and my regular images be 30px square. I'm still a bit confused now if I'm reading Apple's image specifications wrong, ie, if #2x is 2x what they specify, or the regular images are what they specify / 2?!

Chrome and div background layers not loading properly

This is a very weird thing that i've experienced . I've been working on a project lately www.bandness.com, which allows music groups and bands to upload their music. The artistic department has been very keen and precise and they've done an incredible work that allows the bands to have gorgeous profiles .
However, when on Chrome (i've noticed this only happens in chrome), when you enter a profile the background image doesn't load properly until you scroll over it or you "select" the div layer or the ones on top of it.
here are some examples of what i'm talking about
you need to select the layer so it works properly, and that is bugging annoying!!
here you have another example
and this is how the website should be seen without the bug in the left screen
Why does this happen?
The website is www.bandness.com, click on any of the groups where it says "TOP 5 GROUPS" or on the group for each song in "TOP 5 SONGS" and you'll probably spot what I'm talking about.
This has happened to me in chrome, on a macbook pro with the latest OS release. As well as in Windows 8. It bugs me because I have NO idea what is causing this and I fear a chrome bug.
How could it be fixed? Any suggestions are appreciated, I thought of using jQuery to make the layer dissappear/appear or something like that... but i'm unsure of whether this will work.
Ok, so I'm posting this as a help for anyone that suffers the same consequences of this bug at any time.Bear in mind the answer implies using jQuery.
As Christopher kindly pointed out earlier, I tried to do $(SELECTOR).hide().show(), but that didn't make it.
Then I decided to try with $(SELECTOR).hide(100,function(){$(SELECTOR).show()}); ensuring that the effect of showing only happens once the div layer has dissapeared.(that way it actually appears and dissappears).
The solution worked, however this should not be needed and it doesn't provide an answer to why this is happening, but it "kinda" makes the trick .
$(SELECTOR).fadeOut(100,function(){ $(SELECTOR).fadeIn()}); makes this happen in a much fancier way. Again as I said this isn't a fix, it's just a workaround that might get you somewhere if you ever suffer this problem!

weird black bars for firefox users on my website

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.