Проблемы отображения при вставке минифицированного кода
dekairi opened this issue · comments
При вставке минифицированного html, вёрстка поля "Структура разметки" ломается:
- Отображается разметка в "Структуре разметки" помимо дерева. Перекрывает окно вставки и уровней (образует горизонтальный скроллбар).
- Подсвечивает ошибками в "Структуре разметки" часть разметки (та, что появляется, пункт 1).
Можно пример кода, с которым это происходит?
Конечно, вот пример. Браузер Safari.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Wooden coyote music</title><link rel="manifest" href="manifest.json"><link rel="icon" type="image/png" href="favicon.png"><link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"><link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"><link rel="preload" href="fonts/opensans.woff2" as="font"><link rel="preload" href="fonts/opensansbold.woff2" as="font"><link rel="stylesheet" href="css/style.min.css"><script src="js/picturefill.min.js" async></script></head><body class="body"><header class="header"><div class="header__wrap"><a class="header__logo" href="/"><picture><source type="image/webp" media="(min-width: 768px)" srcset="img/logo-small-desktop.webp"/><source type="image/webp" srcset="img/logo-small-mobile.webp"/><source media="(min-width: 768px)" srcset="img/logo-small-desktop.png"/><img class="header__image" src="img/logo-small-mobile.png" alt="Logotype Wooden Coyote music"/></picture><span class="header__title">Wooden Coyote music</span></a><button class="header__toggle" type="button">Open or close menu</button><ul class="menu-list"><li class="menu-list__item"><a class="menu-list__link" href="#listen">Listen</a></li><li class="menu-list__item"><a class="menu-list__link" href="#download">Download</a></li><li class="menu-list__item"><a class="menu-list__link" href="#contacts">Contacts</a></li></ul></div></header><main><h1 class="visually-hidden">Wooden Coyote Free Music</h1><section class="listen" id="listen"><div class="listen__wrap"><h2 class="heading listen__header">Music</h2><ul class="listen__list playlists-list"><li class="playlists-list__item"><iframe class="playlists-list__iframe" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/719659770&color=%23ff9900&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe></li><li class="playlists-list__item"><iframe class="playlists-list__iframe" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/667205940&color=%23ff9900&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe></li><li class="playlists-list__item"><iframe class="playlists-list__iframe" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/842603069&color=%23ff9900&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe></li><li class="playlists-list__item"><iframe class="playlists-list__iframe" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/781530504&color=%23ff9900&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe></li></ul></div></section><section class="download" id="download"><div class="download__wrap"><h2 class="heading download__header">Free bundles for download</h2><ul class="download__list download-list"><li class="download-list__item"><picture><source type="image/webp" srcset="img/electronic-bundle-cover.webp"/><img class="download-list__picture" src="img/electronic-bundle-cover.png" alt="Electronic bundle cover"/></picture><a class="download-list__link" href="/download/electronic-pop-rock.rar" download="download">Get it</a></li><li class="download-list__item"><picture><source type="image/webp" srcset="img/horror-bundle-cover.webp"/><img class="download-list__picture" src="img/horror-bundle-cover.png" alt="Horror bundle cover"/></picture><a class="download-list__link" href="/download/horror-bundle.rar" download="download">Get it</a></li><li class="download-list__item"><picture><source type="image/webp" srcset="img/orchestral-bundle-cover.webp"/><img class="download-list__picture" src="img/orchestral-bundle-cover.png" alt="Orchestral bundle cover"/></picture><a class="download-list__link" href="/download/orchestral-style-bundle.rar" download="download">Get it</a></li><li class="download-list__item"><picture><source type="image/webp" srcset="img/rock-bundle-cover.webp"/><img class="download-list__picture" src="img/rock-bundle-cover.png" alt="Rock bundle cover"/></picture><a class="download-list__link" href="/download/rock-post-punk-bundle.rar" download="download">Get it</a></li></ul></div></section></main><footer class="footer" id="contacts"><div class="footer__wrap"><h2 class="visually-hidden">Contacts</h2><div class="sources"><h3 class="visually-hidden">Find me on other platforms</h3><ul class="sources-list"><li class="sources-list__item"><a class="sources-list__link" href="https://soundcloud.com/jesse-white-952049199/tracks">Listen on SoundCloud<picture><source type="image/webp" srcset="img/soundcloud.webp"/><img class="sources-list__picture" src="img/soundcloud.png" alt="SoundCloud logo"/></picture></a></li><li class="sources-list__item"><a class="sources-list__link" href="https://assetstore.unity.com/publishers/40368">Available on Asset Store<picture><source type="image/webp" srcset="img/asset-store.webp"/><img class="sources-list__picture" src="img/asset-store.png" alt="Asset Store logo"/></picture></a></li><!--li.sources-list__item--><!-- a.sources-list__link(href='itms://music.apple.com/us/artist/wooden-coyote/1441918533') Listen on Apple Music--><!-- picture--><!-- source(type='image/webp' srcset='img/apple-music.webp')--><!-- img.sources-list__picture(src='img/apple-music.png' alt='Apple Music logo')--><!--li.sources-list__item--><!-- a.sources-list__link(href='deezer://www.deezer.com/artist/54062772') Listen on Deezer--><!-- picture--><!-- source(type='image/webp' srcset='img/deezer.webp')--><!-- img.sources-list__picture(src='img/deezer.png' alt='Deezer logo')--><!--li.sources-list__item--><!-- a.sources-list__link(href='spotify:artist:708W3kU9R6NMpX2MFzpb22') Listen on Spotify--><!-- picture--><!-- source(type='image/webp' srcset='img/spotify.webp')--><!-- img.sources-list__picture(src='img/spotify.png' alt='Spotify logo')--></ul></div><div class="contacts"><h3 class="heading contacts__header">Contact me</h3><ul class="contacts-list"><li class="contacts-list__item"><a class="contacts-list__link contacts-list__link--telegram" href="https://web.telegram.org/#/im?p=@foaxdev">Telegram</a><svg enable-background="new 0 0 24 24" viewbox="0 0 24 24" width="30" height="30" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" fill="#039be5" r="12"></circle><path d="m5.491 11.74 11.57-4.461c.537-.194 1.006.131.832.943l.001-.001-1.97 9.281c-.146.658-.537.818-1.084.508l-3-2.211-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.121l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953z" fill="#fff"></path></svg></li><li class="contacts-list__item"><a class="contacts-list__link contacts-list__link--facebook" href="https://www.facebook.com/woodencoyote">Facebook</a><svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 112.196 112.196" style="enable-background: new 0 0 112.196 112.196;" xml:space="preserve"><g><circle style="fill: #3b5998;" cx="56.098" cy="56.098" r="56.098"></circle><path style="fill: #ffffff;" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34 c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z"></path></g></svg></li></ul><a class="contacts__link" href="mailto:en.morgenstern@gmail.com">en.morgenstern@gmail.com</a></div><div class="donation"><a class="donation__link" href="#">Support</a><span class="donation__note">Thank you a lot! ♥</span></div></div></footer><script src="js/script.js"></script></body></html>
Вроде бы удалось поправить, попробуйте сейчас.
Спасибо за баг-репорт : )
Да, всё работает. Спасибо за инструмент! :)