У меня есть CodePen здесь:
http://codepen.io/CWSpear/pen/BCriE
Идея в том, что у приложения есть боковая панель, и вы можете нажать «Развернуть», чтобы сделать область содержимого полной ширины. Если вы хотите по-прежнему открывать боковую панель, вы можете нажать «Всплывающее окно», чтобы боковая панель снова появилась над содержимым (т. Е. Возможно, у вас есть возможность всплывать только в портретном режиме, как в приложении «Почта» на iPad).
Я использовал подход с переключением классов, потому что это сделало JavaScript очень простым, и все делалось с помощью переходов CSS.
Дело в том, что даже несмотря на то, что заголовок/панель инструментов области содержимого не имеет ширины и, следовательно, всегда должна быть полной ширины области содержимого, но когда вы нажимаете «Развернуть», все остальное работает, кроме ширины области содержимого. заголовок не меняется.
Это происходит только в Webkit. Кажется, что он вычисляет, что такое «100%», и хотя я меняю отступ содержимого (что из-за моего размера окна делает содержимое шире), заголовок остается той же ширины. На обратном пути кажется наоборот. Когда я снова нажимаю «Развернуть» (что обычно означает «свернуть», если я об этом думаю) снова, он делает заголовок полной ширины, но когда к содержимому добавляются отступы, он не регулирует ширину, и теперь заголовок слишком широкий для содержания.
Позвольте мне проиллюстрировать:
Раньше: 
Нажмите «Развернуть», и вы получите: 
Вот что ожидается: 
Он отлично работает в Firefox. Также следует отметить, что если вы измените размер окна вручную, оно перекрашивает область и исправляет заголовок (вот так я собственно и получил "ожидаемый" скриншот). Запуск изменения размера с помощью JavaScript не работает (поскольку я не думаю, что это вызывает перерисовку).
Я пытался установить явную ширину «100%» и другие трюки и хаки JavaScript, пытаясь установить процентную ширину в заголовке, но безуспешно.
Кто-нибудь еще сталкивался с этим или имеет исправление?
Он не работал в Safari 6.0.1 и Chrome 22.0.1229.79 и работал в Firefox 15.0.1. Как чемпион, этот Firefox.
[Обновление] Похоже, это связано только с отступами, так как Арен смог исправить это, переключившись на поля. И это работает, потому что ширина содержимого задается автоматически. Если бы это была ширина 100%, то она сломалась бы.
Демонстрация этого здесь: http://codepen.io/CWSpear/pen/uvFJh
Маржа играет хорошо, пока я не поставлю width: 100% на элемент, тогда он вырывается из коробки, даже в box-sizing: border-box.
По какой-то причине реальный проект, над которым я работаю, полностью сворачивает содержимое, когда я устанавливаю width: auto, хотя это определенно display: block. Я пытаюсь воспроизвести это и опубликовать для этого CodePen.
Это действительно ошибка Webkit? Есть ли другие альтернативы?
