web-dev-qa-db-fra.com

débordement caché; ne fonctionne pas sur Chrome avec IFRAMEs?

J'ai un IFRAME avec des débordements cachés dans le CSS et le HTML. Cela fonctionne dans Firefox, mais pas dans Chrome/Safari

Pourquoi est-ce?

htmlcssgoogle-chromeiframeoverflow
41
dukevin

Bon, que diriez-vous:

<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>

comme dans le scrolling="no"

http://jsfiddle.net/neSBS/

73
Joonas

Après une assez grande recherche que j'ai faite sur ce sujet, je voudrais poster ma réponse, qui je suggère, pourrait être un ajout à la réponse de Joonas:

<style>
    iframe {
        overflow:hidden;
    }
</style>
(...)
<iframe scrolling="no" src="http://www.google.com" width="400px" height="300"></iframe>

Je pense que scrolling et overflow:hidden doit être fourni, bien que cette solution ne fonctionne pas dans une combinaison de Chrome et HTML5 doctype. scrolling attribut est déconseillé en HTML5 et overflow La propriété n'affecte pas les iframes dans Chrome. Je suppose que ce dernier est un bug, car la spécification HTML5 dit clairement:

De plus, HTML5 n'a aucun des attributs de présentation qui étaient en HTML4 car leurs fonctions sont mieux gérées par CSS:
(...)
- attribut nowrap sur td et th.
- attribut de règles sur la table.
- attribut de défilement sur iframe .
- attribut de taille en heures.
- attribut de type sur li, et ul.
(...)

C'est dit clairement - en HTML5 scrolling devrait être remplacé par CSS overflow.

12
matewka

Étrange mais - transformer: tourner (0.00001deg); pour div avec débordement: caché; aide pour moi.

2
be3
<style>
    iframe::-webkit-scrollbar {  
    display: none;
}  
</style>

Comme trouvé sur - Safari/Chrome (Webkit) - Impossible de masquer la barre de défilement verticale iframe

1
Ian Everall