Getting border-radius + bg-position to work with an image on Chrome

HTML & CSS
1

I had just installed Google Chrome, and now have started to notice differences.

How would I fix this?

I don’t understand why Chrome is showing it looking differently from firefox.

https://test2codes.blogspot.com/

@Ray.H You had helped me set this one up, using this same method, but it’s not working here.
How come, and what would need to be adjusted?

Here’s the code by itself:
https://jsfiddle.net/ewL2pnsj/4/


.jacketc,
.wraph {
  background: url("https://i.imgur.com/Y3yCWlP.png") no-repeat;
}


.wraph {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
  background-position: -3px -609px;
}

How would I fix it on Chrome so that it won’t get messed up on firefox?

firefox
image

chrome:
image

2

What I see with the unevenness in chrome is the green lines (built in the bg image) showing through due to a misalignment with the pseudo red lines.

Haven’t looked into in detail but the green lines are coming from the bg image

3

I understand that but it should be underneath the red as shown in the firefox image.

Which is why the chrome one the image is blurry, and the firefox image is clearer.

4

One of the browsers might have rounding errors with the AP’d lines.

Not sure which one, haven’t had time to look.

Set up an isolated test case of that player only so it will be easier to debug

5

The code is isolated here:
How would I debug this?
It works fine in firefox, but not Chrome.

1 Like
6

I’m going to say it IS rounding errors on the AP’d lines.

Why don’t you just remove them from the html/css and then just change the bg image to red lines.

The bg image grids look to be uniform.

That way you only need a red border and radius on the main div

7

How would I get this to work using?
border-radius: 25px

I zeroed down on the issue.

Removed:
border-radius: 25px;

.wraph {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  /*border-radius: 25px;*/
  border: 3px solid red;
  box-sizing: border-box;
  background-position: -3px -609px;
}

How can I still use?
border-radius: 25px;
In the code?

8

Hmm, that looks like some kind of nasty bug in chrome while using , border-radius + bg-position + box-sizing. Unconfirmed as a bug but Chrome sure doesn’t like it.

I was able to find a workaround by separating the bg-image/position from the border and radius with another wrapping div.

Bare bones test case with just the essential wrappers and lines.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.outer {  /*borders and radius on new wrapping div w/out bg image*/
  width: 606px;
  height: 606px;
  margin-top: 45px;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
}

.jacketc,
.wraph {
  background: url("https://i.imgur.com/Y3yCWlP.png") no-repeat;
}

.wraph {
  position: relative;
  width: 600px;/*6px borders removed*/
  height: 600px; /*6px borders removed*/
  border-radius: 22px;/*3px less than .outer no rest inside the radius*/
  background-position: -3px -609px;
}

.wraph .linesa::before,
.wraph .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 600px;
  background: red;
}

.wraph .linesa::after {
  left: 399px;
}

.wraph .linesb::before,
.wraph .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: red;
}

.wraph .linesb::after {
  top: 399px;
}


</style>

</head>
<body>

<div class="outer">
  <div class="wraph">
    <div class="linesa"></div>
    <div class="linesb"></div>
  </div>
</div>

</body>
</html>
9

Will this get reported as a bug so it gets fixed?

10

Not confirmed as a bug yet, it will take some more investigating to see exactly which ingredients are causing the conflict.

11

Meaning, what does it take for it to be confirmed as a bug?

Other than it working perfectly fine in firefox, but not Chrome.

12

I did a quick search earlier and there seem to be other border-radius bugs in Chrome. As you pointed out, border-radius is what triggers this conflict with Chrome.

It is throwing the bg-position off by 1px. Reminds me of the old 1px bg jog in IE.
http://www.pmob.co.uk/temp/onepxjog.htm

More testing shows that box-sizing has nothing to do with it. It is triggered with border-radius while using a bg-position.

AP lines removed in code below, look at div’s right side and bottom in chrome.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>

.wraph {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  border-radius: 25px; /*throws off bg-position in chrome*/
  border: 3px solid red;
  box-sizing: border-box;
  background: url("https://i.imgur.com/Y3yCWlP.png") no-repeat;
  background-position: -3px -609px;
}

</style>

</head>
<body>

<div class="wraph"></div>

</body>
</html>
1 Like
13

Since this deals with style codes, wouldn’t these be the first bugs to be fixed in a browser?

Also, the quickest, fastest to resolve.

firefox has bugzilla,

is there an equivalent for Chrome?

Any idea on a time-frame of when it might get resolved, if at all?

14

<off-topic>

Looks to be an “in browser” system instead of a “go here”

</off-topic>

15

That doesn’t seem user friendly at all. What if other people want to see if it was already posted, or maybe people would want to comment on it to confirm it’s a credible bug.

16

I think there was a 1px error in your sprite image.

I trimmed off the outer borders and cut away the top half, no longer a sprite.

test
test600×600 497 KB

Using that image I get consistent results with FF and Chrome. Dragging it out of place by -1px -1px intentionally.

When I set bg-position to 0 0, it is the same in both too. You will get rounding errors in both browsers when you zoom in/out. Chrome may have been getting a rounding error on page load with the original image.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>

.wraph {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  border-radius: 25px;
  border: 3px solid red;
  box-sizing: border-box;
  background: url("test.png") no-repeat -1px -1px;
}

</style>

</head>
<body>

<div class="wraph"></div>

</body>
</html>
1 Like
17

I’m going to take a look at this now and do some editing.

18

Yes I remember a bug from a while ago. IIRC I think you just need to add background-clip:padding-box to fix it.

Unable to test until tomorrow as I’m not on a computer at the moment.

3 Likes
19

My updated code:

600 x 1200
instead of
606 x 1212

image
image600×1200 197 KB

20

That did the trick:

  border-radius: 25px;
  background-clip: padding-box;


.wraph {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  border-radius: 25px;
  background-clip: padding-box;
  border: 3px solid red;
  box-sizing: border-box;
  background-position: -3px -609px;
}