I believe this is an SVG issue? Only happens in Chrome, not firefox


#1

If I remove all those SVG’s, that space isn’t there anymore.

I put a Hello in there and it never moved at all.

This only happens in Chrome, not firefox.

How would I resolve it?

https://testblogerlayout.blogspot.com/

Before it’s clicked:
image

After it’s clicked
image


#2

I see a lot of possible event triggers. Which “it’s” click are you referring to?


#3

It’s the svg’s that are causing it to happen / occur.

If I remove all those SVG’s, that space isn’t there anymore.

I had just tested that.
image

The svg’s shouldn’t be covering all of this:


#4

Here’s the code isolated:
https://jsfiddle.net/zb6mkug3/406/

I don’t believe the Yellow should be going past it’s border.


#5

I believe I know what will fix that, but is that what the issue was?

All that’s needed is
overflow;hidden;?

Because I did the Hello text stuff and there was no difference at all, it never moved.

Usually when the text moves that’s a signal when overflow hidden is needed.

Here the “Hello” text never moved at all:
https://testblogerlayout.blogspot.com/

.wraph {
 overflow:hidden;
}

Inside Chrome
Overflow: hidden; Added Works****
https://testblog56frt5.blogspot.com/

Overflow;hidden; Removed
https://testblogerlayout.blogspot.com/


#7

I’m thinking the svg’s should be set up differently.

When these are highlighted they reach over their border:
.playc .playd .playf .playh .playi

Maybe I should have set these up a different way:
https://jsfiddle.net/zb6mkug3/406/

https://testblogerlayout.blogspot.com/


.wraph .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: red;
}

.wraph .playa {
  margin: 0;
}

.wraph .playb {
  margin: 0 201px;
}

.wraph .playc {
  margin: 0 402px;
}

.wraph .playd {
  margin: 201px 0;
}

.wraph .playe {
  margin: 201px 201px;
}

.wraph .playf {
  margin: 201px 402px;
}

.wraph .playg {
  margin: 402px 0;
}

.wraph .playh {
  margin: 402px 201px;
}

.wraph .playi {
  margin: 402px 402px;
}

#8

or maybe I’m just overthinking it all, and all that was needed was
overflow;hidden;

But what I don’t seem to understand is how come the text never moved at all?

Can you tell me why it never moved?
@PaulOB

Here the “ Hello ” text never moved at all:
https://testblogerlayout.blogspot.com/

Inside Chrome
Overflow: hidden; Added Works****
https://testblog56frt5.blogspot.com/

Overflow;hidden; Removed

Hello text never moved at all signaling that overflow:hidden was needed.
How come it never moved?
https://testblogerlayout.blogspot.com/


#9

I believe this is an SVG issue? Only happens in Chrome, not firefox

What is an SVG issue? You haven’t stated the issue anywhere.

Which space? And are you trying to remove SVGs and preserve the space, or keep the SVGs and remove the space?

In where? How? What result did you expect, and why?

Please explain more clearly. I’ve read the whole thread and I still have no idea what you’re trying to accomplish.


#10

#1

Those 2 images are way different:

After you open the Grid links gadget the background color gets pushed below the footer, but only in the Chrome browser.

As seen here:
https://testblogerlayout.blogspot.com/

“I put a Hello in there and it never moved at all.”

Meaning, after you open the gadget, if the “Hello” text moves at all, that’s a signal telling you that it’s an overflow issue and that overflow:hidden; would be needed here. But here it never moved at all, which was surprising to me because I think it should have.


#11

Thank you. That’s clear now.


#12

So the issue is the space at the bottom of the browser window appearing? I;ve looked at this thread about 20 times and couldn’t work out what you were talking about. I assumed you were talking about the word hello moving and spent ages measuring it :frowning:

The space that appears at the bottom of the window appears because all the players in wraph have massive margins set on them and the window must expand to include the margin even though the margins are not needed because the elements are absolutely placed (that’s why they don’t affect anything else except the viewport height). Remove the margins and the gap will disappear.


#13

What would I do after I delete all the margins?

Am I supposed to do something after?

You mean delete all of these:
https://jsfiddle.net/zb6mkug3/418/

.wraph .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: red;
}
/*
.wraph .playa {
  margin: 0;
}

.wraph .playb {
  margin: 0 201px;
}

.wraph .playc {
  margin: 0 402px;
}

.wraph .playd {
  margin: 201px 0;
}

.wraph .playe {
  margin: 201px 201px;
}

.wraph .playf {
  margin: 201px 402px;
}

.wraph .playg {
  margin: 402px 0;
}

.wraph .playh {
  margin: 402px 201px;
}

.wraph .playi {
  margin: 402px 402px;
}*/

Now only 1 svg is visible:


#14

I meant bottom margins when I mentioned margins :slight_smile: Remove the bottom margins from all of those.


#15

What am I doing so wrong?

Like this:
https://jsfiddle.net/zb6mkug3/421/

.wraph .playa {
  margin: 0;
}

.wraph .playb {
  margin: 0 0;
}

.wraph .playc {
  margin: 0 0;
}

.wraph .playd {
  margin: 201px 0;
}

.wraph .playe {
  margin: 201px 0;
}

.wraph .playf {
  margin: 201px 0;
}

.wraph .playg {
  margin: 402px 0;
}

.wraph .playh {
  margin: 402px 0;
}

.wraph .playi {
  margin: 402px 0;
}

#16

If you use the shorthand margin property, rather than separate margin-top, margin-bottom, margin-left and margin-right, you need to understand what the values refer to.

If you only specify two values, e.g.

.wraph .playf { margin: 201px 402px; }

then the first value applies to both top and bottom margins, and the second to both right and left margins. To specify the bottom margin separately, you need to add a third value:

.wraph .playf { margin: 201px 402px 0; }

#17

Thank you.

Like this then:
https://jsfiddle.net/zb6mkug3/424/


.wraph .playa {
  margin: 0;
}

.wraph .playb {
  margin: 0 201px 0;
}

.wraph .playc {
  margin: 0 402px 0;
}

.wraph .playd {
  margin: 201px 0 0;
}

.wraph .playe {
  margin: 201px 201px 0;
}

.wraph .playf {
  margin: 201px 402px 0;
}

.wraph .playg {
  margin: 402px 0 0;
}

.wraph .playh {
  margin: 402px 201px 0;
}

.wraph .playi {
  margin: 402px 402px 0;
}

#18

What’s your opinion and thoughts on me adding
<ul><li> to the code as I did here?

<ul><li> Added
https://jsfiddle.net/zb6mkug3/455/


.wraph {
  position: relative;
  width: 606px;
  height: 606px;
  margin-top: 45px;
  overflow: hidden;
  border-radius: 25px;
  background: url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
  border: 3px solid red;
  box-sizing: border-box;
}

.wraph .wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wraph .wrapper li {
  margin: 0;
  padding: 0;
}

.wraph .wrapper li a {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.2);
}

.wraph .wrapper li:nth-of-type(3n+2) a {
  margin: 0 3px 0 3px;
}

Are there any extra benefits to me doing that, or is it a waste of additional code that doesn’t need to be there?

One added benefit I found was that adding a background opacity over each individual image works. I could change the tint on each box if I wanted to.

background: rgba(0, 0, 0, 0.2);

<ul><li> Removed
https://jsfiddle.net/zb6mkug3/454/

It works the same way here:
background: rgba(0, 0, 0, 0.7);


.wraph .playa,
.playb,
.playc,
.playd,
.playe,
.playf,
.playg,
.playh,
.playi {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: transparent;
  background: rgba(0, 0, 0, 0.7);
  
}

#19

Maybe adding “ul li nav” isn’t needed, or necessary for this type of code and it can do without that. Thoughts and opinions would be appreciated.

<ul><li> Removed
https://jsfiddle.net/zb6mkug3/468/

<ul><li> Added
https://jsfiddle.net/zb6mkug3/455/


#20

Is this the type of code that would need navigation links added to it?

Why, or why not?

Meaning, all of this extra added stuff:


  <div class="wrapper">

    <ul>
      <li>

This is without all that stuff added:
It has nothing extra added to it.
All those properties in the bellow code are not in this one:
https://jsfiddle.net/zb6mkug3/472/

And this is with it all added:
https://jsfiddle.net/zb6mkug3/473/


.wraph .wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wraph .wrapper li {
  margin: 0;
  padding: 0;
}

.wraph .wrapper li a {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  color: transparent;
  background: rgba(0, 0, 0, 0.2);
}

#21

You don’t need the 2 wrappers as a UL is its own wrapper.

Going only on the code you posted you can remove over 50% of your rules.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.wraph {
	position: relative;
	width: 606px;
	height: 606px;
	margin: 45px 0 0;
	overflow: hidden;
	border-radius: 25px;
	background: url("https://i.imgur.com/1TbGgqz.png") no-repeat 0 -600px;
	border: 3px solid red;
	box-sizing: border-box;
	padding: 0;
	list-style: none;
}
.wraph a {
	float: left;
	width: 198px;
	height: 198px;
	margin: 0 0 3px 0;
	color: transparent;
	background: rgba(0, 0, 0, 0.2);
}
.wraph li:nth-of-type(3n+2) a {
	margin: 0 3px 0 3px;
}
.wraph:before, .wraph:after {
	content: "";
	position: absolute;
	top: 0;
	left: 198px;
	width: 3px;
	height: 600px;
	background: red;
}
.wraph:after {
	left: 399px;
}
.wraph li:first-child:before, .wraph li:first-child:after {
	content: "";
	position: absolute;
	top: 198px;
	left: 0;
	width: 100%;
	height: 3px;
	background: red;
}
.wraph li:first-child:after {
	top: 399px;
}
.wraph svg {
	cursor: pointer;
	fill: transparent;
	background: rgba(0, 0, 0, 0.2);
}
.wraph svg:hover path {
	fill: #0059dd;
}
</style>
</head>

<body>
<ul class="wraph">
  <li> <a href="" target="_blank"> <svg class=" playa" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg></a></li>
  <li> <a href="" target="_blank"> <svg class="playb" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg></a></li>
  <li><a href="" target="_blank"> <svg class="playc" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg></a></li>
  <li> <a href="" target="_blank"> <svg class="playd" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg></a></li>
  <li> <a href="" target="_blank"> <svg class="playe" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg></a></li>
  <li> <a href="" target="_blank"> <svg class="playf" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg></a></li>
  <li> <a href="" target="_blank"> <svg class="playg" width="198" height="198"  viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg></a></li>
  <li> <a href="" target="_blank"> <svg class="playh" width="198" height="198"  viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg></a></li>
  <li> <a href="" target="_blank"> <svg class="playi" width="198" height="198"  viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg></a></li>
</ul>
</body>
</html>

You don’t need all those positions or margins as the svg could just sit inside the float. You don;t need all those classes as the svgs are all the same so just do it once.

I realise your other demos are different and have different actions associated but as you only posted this snippet of code the answers above refer to this snippet of code and not some code you have hidden in your back pocket :slight_smile: