Cromo / firefox inconsistente cuando el padre se posiciona con absoluto -- ss campo con firefox campo con cross-browser camp Relacionados El problema

Chrome / Firefox inconsistent when parent is positioned with absolute


1
vote

problema

Español

Tengo un mapa con iconos redondeados en él.

Estoy usando elementos de lona vacíos para preservar 1: 1 relación de aspecto en contenedores redondeados

Cuando se ve en Chrome 67, todo está bien, pero con Firefox 60 no funciona, la relación de aspecto no se conserva y los iconos tienen un ancho de contenido de cero (solo su relleno los hace visibles) Sucede si los padres (código> .zone ) tienen position:absolute , sin embargo, funciona cuando .zone tiene 9988777665 .

Realmente necesito position:absolute , ¿Alguien sabe por qué Firefox no amplía el ancho de .item para ajustar al elemento de lienzo?

  * {    margin: 0;    box-sizing: 0;  }    .zone {    position: absolute;    left: 5%;    right: 5%;    top: 5%;    bottom: 5%;    background: grey;  }    .item {    position: absolute;    transform: translate(-50%, -50%);    height: calc(100% / 11);    border-radius: 50%;    z-index: 3;    overflow: hidden;    cursor: help;    border: 1.5px solid #0acaff;    color: #0acaff;  }    .item canvas {    height: 100%;  }    .square_content {    background: red;    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    display: flex;    align-items: center;    padding: 5px;  }  
  <div class="zone">    <!-- inline style is computed -->    <div class="item" style="left: 22.727%;top: 77.273%;">      <canvas width="1" height="1"></canvas>      <div class="square_content">      </div>    </div>  </div>  

NOTA: En el fragmento, debe ver en su mayoría una zona gris con un icono perfectamente redondeado (borde azul y fondo rojo)

Original en ingles

I have a map with rounded icons on it.

I'm using empty canvas elements to preserve 1:1 aspect ratio on rounded containers

When viewing in Chrome 67 everything is fine, but with Firefox 60 it does not work, aspect ratio is not preserved and icons have a content width of zero (only their padding make them visible) It happens if parent (.zone) has position:absolute, however it work when .zone has position:relative.

I really need position:absolute, does somebody know why firefox does not expand width of .item to adjust to the canvas element ?

* {    margin: 0;    box-sizing: 0;  }    .zone {    position: absolute;    left: 5%;    right: 5%;    top: 5%;    bottom: 5%;    background: grey;  }    .item {    position: absolute;    transform: translate(-50%, -50%);    height: calc(100% / 11);    border-radius: 50%;    z-index: 3;    overflow: hidden;    cursor: help;    border: 1.5px solid #0acaff;    color: #0acaff;  }    .item canvas {    height: 100%;  }    .square_content {    background: red;    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    display: flex;    align-items: center;    padding: 5px;  }
<div class="zone">    <!-- inline style is computed -->    <div class="item" style="left: 22.727%;top: 77.273%;">      <canvas width="1" height="1"></canvas>      <div class="square_content">      </div>    </div>  </div>

Note: on the snippet you should see mostly a gray zone with a perfectly rounded icon (blue border and red background)

        
         
         

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

El problema es con overflow: hidden;0 su valor no está recogiendo en firefox , si cambia el overflow: hidden;11 / Código> a overflow: hidden;2 tu código funcionará bien.

Un código de muestra para usted:

  overflow: hidden;3  
  overflow: hidden;4  

El trabajo de muestra anterior será todos los navegadores, espero que esto sea útil para usted.

 

The issue is with height: calc(100% / 11); it's value is not picking up in Firefox, if you change the % to vw your code will work fine.

A sample code for you:

* {    margin: 0;    box-sizing: 0;  }    .zone {    position: absolute;    left: 5%;    right: 5%;    top: 5%;    bottom: 5%;    background: grey;  }    .item {    position: absolute;    transform: translate(-50%, -50%);    height: 4vw;    /* or height: calc(40vw/11); */    border-radius: 50%;    z-index: 3;    overflow: hidden;    cursor: help;    border: 1.5px solid #0acaff;    color: #0acaff;  }    .item canvas {    height: 100%;  }    .square_content {    background: red;    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    display: flex;    align-items: center;    padding: 5px;  }
<div class="zone">    <!-- inline style is computed -->    <div class="item" style="left: 22.727%;top: 77.273%;">      <canvas width="1" height="1"></canvas>      <div class="square_content">      </div>    </div>  </div>

The above sample work will all browsers, Hope this was helpful for you.

 
 
       
       

Relacionados problema

78  HTML: Cómo forzar los enlaces a abrir en una nueva pestaña, no nueva ventana [duplicar]  ( Html how to force links to open in a new tab not new window ) 
Esta pregunta ya tiene respuestas aquí : Abra una URL en una nueva pestaña (y no una nueva ventana) ...

0  ¿Qué puede causar una pantalla de flash mutada como esta?  ( What can cause mutated flash display like this ) 
Estoy teniendo un problema flash de navegación cruzada extraña. Por favor, vea la captura de pantalla a continuación. He visto este comportamiento antes, pero...

0  Error de índice Z en Internet Explorer  ( Z index error in internet explorer ) 
Tengo dos diveces que tienen las mismas dimensiones. One DIV se coloca sobre el otro. Cada vez que necesitaba lo contrario, asigné Z-index para el otro div. E...

1  Array.prototype.find () vs IE11  ( Array prototype find vs ie11 ) 
https://caniuse.com/#search=find dice el método Buscar () No es compatible con IE11. Al mismo tiempo, estoy probando este método de búsqueda () en IE11 y ...

3  ¿Cómo puedo aumentar el éxito de "window.onbeforeurnload" para enviar un ping AJAX?  ( How can i increase the success of window onbeforeunload to send an ajax ping ) 
He leído docenas de preguntas y respuestas sobre es así, y ninguna de ellas responde mi pregunta en particular ... la mayoría de ellos se centran alrededor de...

1  Estilo predeterminado del botón de envío para el formulario  ( Default submit button style for form ) 
Ahora sé que este problema está sobre-hablado, pero parece que no puedo encontrar una pregunta que aborda esta pequeña gema directamente, así que aquí va ... ...

0  Si mi sitio trabajaba con los estándares IE6, ¿hay un doctype que hará que IE8 actúe es IE6?  ( If my site worked with ie6 standards is there a doctype that will make ie8 act ) 
Supongo que esto podría ser un milagro, pero hay una manera de hacer que el DOCTYPE de DIGA IE8 para tratar el HTML como lo haría en el modo de normas IE6. Sé...

0  Extender una clase o crear una nueva función, ¿cuál es mejor? [cerrado]  ( Extending a class or creating a new function which is better ) 
Según lo que actualmente representa, esta pregunta no es un buen ajuste para nuestro Q & Amp; un formato. Esperamos que las...

0  Es decir, problemas de compatibilidad con wordpress  ( Ie compatibility issues w wordpress ) 
Las plantillas generalmente WordPress se encargan de la compatibilidad de los navegadores cruzados para usted, pero básicamente he construido mi propio y no h...

4  ¿Cómo cambia _layout.cshtml según la pantalla VS Handheld? (.NET MVC3)  ( How do you switch layout cshtml based on screen vs handheld net mvc3 ) 
Estoy diseñando un pequeño sitio web que quiero poder navegar tanto en una computadora como en un dispositivo móvil. Entiendo que puedo intercambiar mi CSS co...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos